<template>
  <div class="industry-activities">
    <div class="section-header">
      <h3>
        <i class="fas fa-calendar-alt"></i>
        <span>行业活动</span>
      </h3>
      <NuxtLink to="/activities" class="more-link">
        <span>更多活动</span>
        <i class="fas fa-angle-double-right"></i>
      </NuxtLink>
    </div>

    <div class="activities-grid">
      <div 
        v-for="(activity, index) in activities" 
        :key="activity.id" 
        class="activity-card"
        :style="{ animationDelay: `${index * 0.1}s` }"
        @mouseenter="onCardHover"
        @mouseleave="onCardLeave"
      >
        <div class="card-header">
          <div class="date-time-section">
            <div class="date-block">
              <span class="day">{{ activity.date.day }}</span>
              <span class="month">{{ activity.date.month }}</span>
            </div>
            <div class="time">
              <i class="fas fa-clock"></i>
              <span>{{ activity.time }}</span>
            </div>
          </div>
          <span :class="['status-badge', activity.statusClass, { 'pulse': activity.statusClass === 'hot-registering' }]">
            {{ activity.status }}
          </span>
        </div>
        
        <div class="card-body">
          <h4 class="activity-title">{{ activity.title }}</h4>
          <p class="activity-description">{{ activity.description }}</p>
          
          <div class="activity-meta">
            <div class="meta-item">
              <i class="fas fa-map-marker-alt"></i>
              <span class="activity-location">{{ activity.location }}</span>
            </div>
          </div>
          
          <div class="activity-tags">
            <span v-for="(tag, tagIndex) in activity.tags" :key="tag" class="tag-item" :style="{ animationDelay: `${tagIndex * 0.1}s` }">
              {{ tag }}
            </span>
          </div>
        </div>
        
        <div class="card-footer">
          <div class="activity-organizer">
            <i class="fas fa-building organizer-icon"></i>
            <span class="organizer-name">{{ activity.organizer.name }}</span>
            <i class="fas fa-check-circle verified-icon"></i>
          </div>
          <button class="register-button" :class="{ 'registering': activity.statusClass === 'registering' }">
            <i class="fas fa-edit"></i>
            <span>报名</span>
            <div class="button-shine"></div>
          </button>
        </div>
        
        <div class="card-glow"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const activities = ref([
  {
    id: 1,
    date: { day: '15', month: '11月' },
    status: '报名中',
    statusClass: 'registering',
    time: '09:00-18:00',
    title: '2024全国食用菌产业发展大会',
    description: '聚焦食用菌产业创新发展,探讨行业前沿技术与市场趋势,邀请国内外知名专家学者进行主题演讲。',
    location: '北京国际会议中心',
    participants: { registered: 1200, capacity: 2000 },
    tags: ['行业峰会', '技术交流', '政策解读'],
    organizer: { name: '中国食用菌协会' },
    link: '/activity/1'
  },
  {
    id: 2,
    date: { day: '20', month: '11月' },
    status: '即将开始',
    statusClass: 'upcoming',
    time: '14:00-17:30',
    title: '华中地区菌种技术交流会',
    description: '邀请行业专家分享菌种培育最新技术,促进区域合作交流,现场演示菌种培育全流程。',
    location: '武汉光谷会展中心',
    participants: { registered: 800, capacity: 1000 },
    tags: ['技术培训', '实操演示', '经验分享'],
    organizer: { name: '湖北省农科院' },
    link: '/activity/2'
  },
  {
    id: 3,
    date: { day: '05', month: '12月' },
    status: '火热报名',
    statusClass: 'hot-registering',
    time: '10:00-16:00',
    title: '食用菌品质评比大赛',
    description: '评选优质食用菌产品,推广品质标准,提升行业整体水平,设置多个奖项类别。',
    location: '河南西峡',
    participants: { registered: 500, capacity: 600 },
    tags: ['品质评选', '行业标准', '奖项评比'],
    organizer: { name: '河南省农业协会' },
    link: '/activity/3'
  }
]);

// 交互功能
const onCardHover = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(-8px) scale(1.02)';
};

const onCardLeave = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(0) scale(1)';
};
</script>

<style lang="scss" scoped>
.industry-activities {
  background: $bg-color-white;
  border-radius: $border-radius-lg;
  padding: $spacing-lg;
  box-shadow: $box-shadow-base;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;


  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    animation: slideInFromTop 0.8s ease-out;

    h3 {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      margin: 0;
      font-size: $font-size-xl;
      font-weight: $font-weight-semibold;
      color: $text-color;
      position: relative;

      i {
        color: $primary-color;
        font-size: $font-size-xxl;
        animation: pulse 2s infinite;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: $primary-color;
        animation: underlineExpand 1s ease-out 0.5s forwards;
      }
    }

    .more-link {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      color: $text-color-secondary;
      font-size: $font-size-base;
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      padding: 8px 16px;
      border-radius: 20px;
      background: transparent;

      &:hover {
        color: $primary-color;
        background: rgba($primary-color, 0.1);
        transform: translateX(4px);
      }

      i {
        transition: transform 0.3s ease;
      }

      &:hover i {
        transform: translateX(4px);
      }
    }
  }

  .activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-md;

    @include tablet {
      grid-template-columns: repeat(2, 1fr);
    }

    @include mobile {
      grid-template-columns: 1fr;
    }

    .activity-card {
      background: $bg-color-white;
      border: 1px solid $border-color-light;
      border-radius: $border-radius-base;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      position: relative;
      opacity: 0;
      transform: translateY(30px);
      animation: cardSlideIn 0.6s ease-out forwards;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: $primary-color;

        .register-button {
          background: darken($primary-color, 5%);
        }
      }

      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $spacing-sm $spacing-md;
        background: linear-gradient(135deg, $bg-light-gray 0%, #f8f9fa 100%);
        border-bottom: 1px solid $border-color-light;
        position: relative;

        .date-time-section {
          display: flex;
          align-items: center;
          gap: $spacing-sm;

          .date-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
            color: $text-white;
            border-radius: $border-radius-sm;
            padding: $spacing-xs $spacing-sm;
            line-height: 1;
            flex-shrink: 0;
            width: 50px;
            box-shadow: 0 4px 12px rgba($primary-color, 0.3);
            transition: all 0.3s ease;

            .day {
              font-size: $font-size-lg;
              font-weight: $font-weight-bold;
            }

            .month {
              font-size: $font-size-sm;
              opacity: 0.9;
            }
          }

          .time {
            display: flex;
            align-items: center;
            gap: $spacing-xs;
            font-size: $font-size-sm;
            color: $text-color-secondary;

            i {
              color: $text-color-disabled;
              animation: tick 2s infinite;
            }
          }
        }

        .status-badge {
          display: inline-block;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: $font-size-xs;
          font-weight: $font-weight-medium;
          color: $text-white;
          text-align: center;
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
          }

          &:hover::before {
            left: 100%;
          }

          &.registering {
            background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
          }
          &.upcoming {
            background: linear-gradient(135deg, $info-color 0%, darken($info-color, 10%) 100%);
          }
          &.hot-registering {
            background: linear-gradient(135deg, $warning-color 0%, darken($warning-color, 10%) 100%);
            animation: pulse 1.5s infinite;
          }

          &.pulse {
            animation: pulse 1.5s infinite;
          }
        }
      }

      .card-body {
        flex-grow: 1;
        padding: $spacing-md;
        display: flex;
        flex-direction: column;
        gap: $spacing-sm;


        .activity-title {
          font-size: $font-size-base;
          font-weight: $font-weight-semibold;
          color: $text-color;
          margin: 0;
          line-height: 1.4;
          height: 2.8em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          transition: color 0.3s ease;

          &:hover {
            color: $primary-color;
          }
        }

        .activity-description {
          font-size: $font-size-sm;
          color: $text-color-secondary;
          line-height: 1.5;
          margin: 0;
          height: 4.5em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .activity-meta {
          display: flex;
          flex-direction: column;
          gap: $spacing-xs;
          margin-top: $spacing-sm;

          .meta-item {
            display: flex;
            align-items: center;
            gap: $spacing-xs;
            font-size: $font-size-sm;
            color: $text-color-secondary;
            transition: color 0.3s ease;

            &:hover {
              color: $primary-color;
            }

            i {
              color: $text-color-disabled;
              font-size: $font-size-sm;
              transition: color 0.3s ease;
            }

          }
        }

        .activity-tags {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-xs;
          margin-top: $spacing-sm;

          .tag-item {
            padding: 4px 12px;
            background: linear-gradient(135deg, $bg-light-gray 0%, #f8f9fa 100%);
            border-radius: 15px;
            font-size: $font-size-xs;
            color: $text-color-secondary;
            border: 1px solid $border-color-light;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(10px);
            animation: tagSlideIn 0.4s ease-out forwards;

            &:hover {
              background: $primary-color;
              color: $text-white;
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba($primary-color, 0.3);
            }
          }
        }
      }

      .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $spacing-sm $spacing-md;
        background: linear-gradient(135deg, $bg-light-gray 0%, #f8f9fa 100%);
        border-top: 1px solid $border-color-light;
        margin-top: auto;

        .activity-organizer {
          display: flex;
          align-items: center;
          gap: $spacing-xs;

          .organizer-icon {
            font-size: 16px;
            color: $text-color-secondary;
          }

          .organizer-name {
            font-size: $font-size-sm;
            color: $text-color;
            font-weight: $font-weight-medium;
          }

          .verified-icon {
            font-size: 12px;
            color: $success-color;
          }
        }

        .register-button {
          background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
          color: $text-white;
          border: none;
          border-radius: 20px;
          padding: 8px 16px;
          font-size: $font-size-sm;
          font-weight: $font-weight-medium;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: $spacing-xs;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          &:hover {
            background: linear-gradient(135deg, darken($primary-color, 5%) 0%, darken($primary-color, 15%) 100%);
          }

          &.registering {
            background: linear-gradient(135deg, $warning-color 0%, darken($warning-color, 10%) 100%);
            
            &:hover {
              background: linear-gradient(135deg, darken($warning-color, 5%) 0%, darken($warning-color, 15%) 100%);
            }
          }

          .button-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: transform 0.6s ease;
          }
        }
      }

      .card-glow {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, $primary-color, $info-color, $warning-color, $primary-color);
        border-radius: $border-radius-md;
        opacity: 0;
        z-index: -1;
        transition: all 0.4s ease;
        background-size: 400% 400%;
      }
    }
  }
}

// 动画定义

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes underlineExpand {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes tick {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tagSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
